<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

<script setup lang="ts">
import { useI18n } from "vue-i18n";

import { computed, reactive, ref, onMounted, toRaw, watch } from 'vue'

import { ElMessage } from 'element-plus';

// import HelloWorld from "@/components/HelloWorld.vue";
import { Greet, Log, ListKeys } from '../../wailsjs/go/main/App.js'

/*

export default {
  data:() =>({
    txt1:"",
  }),
}
 */

const txt1 = ref('123')

const myData = reactive({
    tableHeight:window.innerHeight-100,
  text1:"a",
    keyList:[
        {"key":"k1", "remark":"r1", "typ":"string"},
        {"key":"k2", "remark":"r2", "typ":"set"},
        {"key":"k21", "remark":"r2", "typ":"set"},
        {"key":"k22", "remark":"r2", "typ":"set"},
        {"key":"k23", "remark":"r2", "typ":"set"},
        {"key":"k24", "remark":"r2", "typ":"set"},
        {"key":"k25", "remark":"r2", "typ":"set"},
        {"key":"k26", "remark":"r2", "typ":"set"},
        {"key":"k27", "remark":"r2", "typ":"set"},
        {"key":"k28", "remark":"r2", "typ":"set"},
        {"key":"k29", "remark":"r2", "typ":"set"},
        {"key":"k210", "remark":"r2", "typ":"set"},
        {"key":"k2111", "remark":"r2", "typ":"set"},
        {"key":"k2112", "remark":"r2", "typ":"set"},
        {"key":"k2113", "remark":"r2", "typ":"set"},
        {"key":"k2114", "remark":"r2", "typ":"set"},
        {"key":"k2115", "remark":"r2", "typ":"set"},
        {"key":"k2116", "remark":"r2", "typ":"set"},
        {"key":"k2117", "remark":"r2", "typ":"set"},
        ],
})

const { t } = useI18n();
const OnClick = () => {
    Log("btn click");

    ListKeys().then((result) => {
       myData.keyList = JSON.parse(result);
    });

    /*
    Greet(myData.text1).then((result) => {
        myData.text1 = result;
    });
    */
};

const OnSelect = (row, column, event) => {
    Log("click key:" + row["key"]);
};

const handleResize = () => {
    myData.tableHeight = window.innerHeight-20;
};

onMounted(async() => {
    Log("js onMounted");
    handleResize();
    window.addEventListener("resize", handleResize);

    OnClick();

    setTimeout(()=>{
    }, 1000);
})


/*
export default {
name:'redis doc',
data:() => ({

}),

mounted() {
    OnClick();
},
methods:{
    onWinsizechange:function (h) {
        Log("窗口大小变了"+h);
    },
},
};
 */


</script>

<!--12 height="199"3
    <el-button @click="OnClick">Click</el-button>
-->

<template>

    <el-main>

        <el-table @row-click="OnSelect"
        :data="myData.keyList"
                  :height="myData.tableHeight"
                  ref="table1"
            >
            <el-table-column
               prop="key"
               label="key">
            </el-table-column>
            <el-table-column
                prop="remark"
                label="备注"
            ></el-table-column>
            <el-table-column
                prop="typ"
                label="类型"
            ></el-table-column>
        </el-table>
    </el-main>

</template>

<!--

    <el-container style="height: 500px; border: 1px solid #eee">
    </el-container>

<el-input
        placeholder="请输入文本"
        v-model="myData.text1"
        width="50"
>
</el-input>

<style lang="scss">
.home {
  .logo {
    display: block;
    width: 620px;
    height: 280px;
    margin: 10px auto 10px;
  }
  .link {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    margin: 18px auto;
    .btn {
      display: block;
      width: 150px;
      height: 50px;
      line-height: 50px;
      padding: 0 5px;
      margin: 0 30px;
      border-radius: 8px;
      text-align: center;
      font-weight: 700;
      font-size: 16px;
      white-space: nowrap;
      text-decoration: none;
      cursor: pointer;
      &.start {
        background-color: #fd0404;
        color: #ffffff;
        &:hover {
          background-color: #ec2e2e;
        }
      }
      &.star {
        background-color: #ffffff;
        color: #fd0404;
        &:hover {
          background-color: #f3f3f3;
        }
      }
    }
  }
}
</style>
-->
